<template >
    <div class="box">
        <div class="null-page" v-show="yes"></div>

        <el-card class="box-card member-coupon">
            <div slot="header" class="clearfix">竞价</div>
            <div class="my-account">
                <div class="my-account-li">
                    <ul class="my-account-li-num">
                        <li>商品信息</li>
                        <li>单价</li>
                        <li>截止时间</li>
                    </ul>
                    <ol class="my-account-li-ol">
                        <li>
                            <img :src="$util.img(bidding_info.sku_image)" alt="" />
                        </li>
                        <li>
                            <span>{{ bidding_info.pintuan_name }}</span>
                            <p v-for="(item, index) in sku_spec_format" :key="index">{{ item.spec_name }}:{{ item.spec_value_name }}</p>
                        </li>
                        <li>
                            <span>￥{{ bidding_info.price }}</span>
                        </li>
                        <li>
                            <span>{{ $util.timeStampTurnTime(bidding_info.bidding_end_time) }} </span>
                        </li>
                    </ol>
                </div>

                <h4 class="my-account-h4">竞标等级</h4>

                <!-- <template class="my-account-template" tooltip-effect="dark" @selection-change="handleDetailSelectionChange">
                    <el-table stripe :data="bidding_level_rule" style="width: 100%" :row-class-name="rowClassName">
                        <el-table-column width="50" align="center">
                            <template slot-scope="scope">
                                <el-checkbox :checked="selected_index == scope.$index ? true : false" @change="getchecked(scope.$index, scope.row)"></el-checkbox>
                            </template>
                        </el-table-column>

                        <el-table-column label="竞标等级" prop="xh" align="center"></el-table-column>
                        <el-table-column prop="bidding_num" label="数量(件)" align="center"> </el-table-column>
                        <el-table-column prop="cost_price" label="成本(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_price" label="拼团价(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_num" label="成团人数" align="center"> </el-table-column>
                    </el-table>
                </template> -->
                 <template class="my-account-template">
                    <el-table stripe
                        tooltip-effect="dark" 
                        :data="bidding_level_rule"
                        style="width: 100%"
                        :row-class-name="rowClassName"
                        ref="multipleTable"
                        @select-all="onSelectAll"
                        @selection-change="selectItem"
                        @row-click="onSelectOp">
                        <el-table-column width="50" align="center" type="selection"></el-table-column>
                        <el-table-column label="竞标等级" prop="xh" align="center"></el-table-column>
                        <el-table-column prop="bidding_num" label="数量(件)" align="center"> </el-table-column>
                        <el-table-column prop="cost_price" label="成本(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_price" label="批发价(元)" align="center"> </el-table-column>
                        <el-table-column prop="pintuan_num" label="成团人数" align="center"> </el-table-column>
                    </el-table>
                </template>

                <template>
                    <div class="jiesuan">
                        <p>预期获利：{{ earn_profit }}元</p>
                        <span>竞标金额：{{ total_sum }}元</span><br />
                        <el-button @click="orderCreate">去支付</el-button>
                    </div>
                </template>
            </div>
        </el-card>

        <el-dialog title="使用余额" :visible.sync="dialogpay" width="350px">
            <template v-if="isset == 0">
				<p>为了您的账户安全,请您先设置的支付密码</p>
				<p>可到"会员中心","账号安全","支付密码"中设置</p>
				<span slot="footer" class="dialog-footer">
					<el-button size="small" @click="dialogpay = false">暂不设置</el-button>
					<el-button size="small" type="primary" @click="setPayPassword">立即设置</el-button>
				</span>
			</template>
            <el-form v-else status-icon ref="ruleForm" label-width="100px">
                <el-form-item label="支付密码" class="pay-password-item">
                    <!--添加一个不可见的input,欺骗浏览器自动填充-->
                    <el-input type="password" class="pay-password" :maxlength="6" v-model="password" @input="input"></el-input>
                </el-form-item>
                <p class="ns-text-color forget-password" @click="setPayPassword">忘记密码</p>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { biddingdetail, enter } from "@/api/member/bidding"
import { issetPayPassword } from "@/api/pay"

export default {
    data() {
        return {
            bidding_info: " ",
            yes: true,
            bidding_id: 0,
            sku_spec_format: " ",
            bidding_level_rule: [],
            total_sum: 0,
            earn_profit: 0,
            dialogpay: false,
            password: "",
            selected_index: -1,
            selected_number: -1,
            isset: 0, //是否设置支付密码
        }
    },
    created() {
        this.bidding_id = this.$route.query.bidding_id
        this.getbiddingdetail();
        this.getisSetPaypassword();
    },
    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },

    methods: {
        getisSetPaypassword() {
            issetPayPassword()
                .then(res=>{
                    if(res.code >= 0) {
                        this.isset = res.data.isset
                    }
                })
                .catch(err=>{
                    console.log(err,'paypassword is error')
                })
        },
        onSelectAll() {
            this.$refs.multipleTable.clearSelection();
        },
        selectItem(rows) {
            this.selected_index = -1;
            this.earn_profit = 0.00;
            this.total_sum = 0.00;
            let moutton = rows[0]
            this.selected_index = moutton.xh - 1;
            this.earn_profit = ((moutton.pintuan_price - moutton.cost_price) * moutton.bidding_num).toFixed(2)
            this.total_sum = Number(moutton.bidding_money).toFixed(2) //总价

            if (rows.length > 1) {
            var newRows = rows.filter((it, index) => {
                if (index == rows.length - 1) {
                this.$refs.multipleTable.toggleRowSelection(it, true);
                return true;
                } else {
                this.$refs.multipleTable.toggleRowSelection(it, false);
                return false;
                }
            });
            this.multipleSelection = newRows;
            } else {
            this.multipleSelection = rows;
            }
        },
        onSelectOp(row) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row, true);
            this.multipleSelection = [];
            this.multipleSelection.push(row);
        },
        rowClassName({ row, rowIndex }) {
            row.xh = rowIndex + 1
        },
        getbiddingdetail() {
            console.log('111')
            biddingdetail({ bidding_id: this.bidding_id })
                .then((res) => {
                    this.bidding_info = res.data
                    //this.sku_spec_format = [...JSON.parse(res.data.sku_info.sku_spec_format)]
                    this.bidding_level_rule = res.data.bidding_level_rule
                    console.log(this.bidding_level_rule,'1111')
                })
                .catch(err=>{
                    console.log(err);
                })
        },
        // getchecked(index, item) {
        //     this.selected_index = index
        //     let moutton = item
        //     this.earn_profit = ((moutton.pintuan_price - moutton.cost_price) * moutton.bidding_num).toFixed(2)
        //     this.total_sum = Number(item.bidding_money).toFixed(2) //总价

            //this.bidding_level_rule=[];
            //this.$forceUpdate();
            //this.getbiddingdetail();
        // },
        orderCreate() {
            if (this.selected_index == -1) {
                this.dialogpay = false
                this.$message({
                    message: "请选择等级",
                    type: "warning"
                })
            } else {
                if(Number(this.total_sum) == 0) {
                    enter({ bidding_id: this.bidding_id, pay_password: '', bidding_level: this.selected_index })
                    .then((res) => {
                        if (res.code >= 0) {
                            this.$message({
                                message: "竞标成功",
                                type: "warning"
                            })
                            this.$router.push('/member/competitive');
                            loading.close()
                            this.dialogpay = false
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            message: err.message,
                            type: "warning"
                        })
                        loading.close()
                        this.dialogpay = false
                    })
                }else {
                    this.dialogpay = true
                }
            }
        },
        input() {
            if (this.password.length == 6) {
                var loading = this.$loading({
                    lock: true,
                    text: "支付中",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                })
                enter({ bidding_id: this.bidding_id, pay_password: this.password, bidding_level: this.selected_index })
                    .then((res) => {
                        if (res.code >= 0) {
                            this.$message({
                                message: "竞标成功",
                                type: "warning"
                            })
                            this.$router.push('/member/competitive');
                            loading.close()
                            this.dialogpay = false
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            message: err.message,
                            type: "warning"
                        })
                        loading.close()
                        this.dialogpay = false
                    })
            }
        },
        setPayPassword() {
            this.$router.pushToTab("/member/security")
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}
.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.my-account-li-num {
    height: 30px;
    width: 939px;
    background: #f7f7f7;

    border: 1px solid #eeeeee;

    text-align: left;
    li {
        float: left;
        &:nth-child(1) {
            width: 60%;

            margin: 5px 0 0 28px;
        }
        &:nth-child(2) {
            width: 20%;
            margin: 5px 0 0 0;
        }
        &:nth-child(3) {
            margin: 5px 0 0 0;
        }
    }
}
.my-account-li-ol {
    height: 134px;
    width: 939px;

    border: 1px solid #eeeeee;

    li {
        float: left;
        &:nth-child(1) {
            width: 15.5%;
            img {
                width: 89px;
                height: 89px;

                margin: 24px 0 0 28px;
            }
        }
        &:nth-child(2) {
            width: 37%;
            span {
                width: 240px;
                display: inline-block;
                line-height: 15px;
                margin-top: 24px;
            }
            p {
                margin-top: 20px;
                color: #cccccc;
            }
        }
        &:nth-child(3) {
            width: 28%;
            span {
                display: inline-block;
                margin: 24px 0 0 95px;

                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #ff5f8a;
            }
        }
        &:nth-child(4) {
            span {
                display: inline-block;
                margin: 24px 0 0 30px;
                font-size: 15px;
                color: #ff5f8a;
                width: 84px;
            }
        }
    }
}
.my-account-h4 {
    height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #303133;
    line-height: 36px;

    margin: 30px 0 0 0;
}
.el-table {
    margin: 50px 0 0 0;
}

.jiesuan {
    height: 300px;
    position: relative;
    span {
        position: absolute;
        right: 0;
        top: 50px;
        color: red;

        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ff5f8a;
    }

    p {
        position: absolute;
        right: 0;
        top: 90px;

        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ff5f8a;
    }
    button {
        position: absolute;
        right: 0;
        top: 150px;
        width: 114px;
        height: 40px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        color: #ffffff;
    }
}
</style>
<style lang="less"  scoped>
.my-account-template /deep/ .el-table tr {
    background-color: transparent !important;
}
</style>>
    
